<template>
  <div class="car">
    <div class="haed">
      <h2>购物车</h2>
      <p @click="wan">完成</p>
    </div>
    <div class="lists" v-for="item in CartList" :key="item._id">
      <input type="checkbox" v-model="item.checked" />
      <van-card
        :num="item.quantity"
        :price="item.product.price"
        desc="描述信息"
        :title="item.product.name"
        :thumb="item.product.coverImg"
      ></van-card>
    </div>
    <div class="Settlement">
      <label>
        <input type="checkbox" v-model="checkAll" />全选
      </label>
      <div class="Settlement_button">
        <van-button @click="datle" round type="danger">删除</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getData, getCart, postCart, delCart } from "../services/dress.js";
import { Icon } from "vant";

export default {
  name: "Car",
  data() {
    return {
      CartList: [],
      datleList: [],
    };
  },
  created() {
    getCart().then((res) => {
      // console.log(res);
      res.forEach((item) => {
        item.checked = false;
      });
      this.CartList = res;
      // console.log(this.CartList);
    });
  },
  methods: {
    datle() {
      this.datleList = this.CartList.filter((item) => {
        return item.checked;
      });
      this.datleList.forEach((item) => {
        delCart(item._id);
      });
      location.reload();
    },
    wan() {
      this.$router.push({
        name: "Car",
      });
    },
  },
  computed: {
    checkAll: {
      // 手动改变checkAll的值时触发set
      set(v) {
        this.CartList.forEach((item) => (item.checked = v));
      },
      // 当所依赖的数据CartList发生改变之后会触发get操作，重新计算当前checkAll的值
      get() {
        if (this.CartList.filter((item) => item.checked).length == 0) {
          return false;
        }
        return (
          this.CartList.length ===
          this.CartList.filter((item) => item.checked).length
        );
      },
    },
  },
};
</script>

<style scoped>
/* html {
  font-size: 100px;
  width: 26.66666vw;
} */
.car {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  height: 100%;
  /* justify-content: space-between; */
}
.car .haed {
  padding: 10px;
  display: flex;
  height: 90px;
  justify-content: space-between;
  align-items: center;
  /* background: yellowgreen; */
}
.car .lists {
  /* flex: 1;
  overflow: auto;
  background: red; */
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: relative; */
}
.car .lists input {
  border-radius: 50%;
}
.car .Settlement {
  height: 54px;
  /* width: 94%; */
  padding: 0 10px 55px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* position: fixed;
  bottom: 55px; */
}
.car .Settlement_button {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.car .Settlement_button p {
  margin-right: 10px;
}
</style>
